<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="wrap">
        <div class="button-groups">
            <button class="add">新增</button>
            <button class="del">删除</button>
        </div>
        <ul class="list">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </ul>
    </div>
</body>
<script>

    var add = document.querySelector(".add");
    var del = document.querySelector(".del");
    var ul = document.getElementsByClassName("list")[0];

    // 获取ul中的li 
    var liList1 = document.querySelectorAll(".list li");
    var liList2 = ul.getElementsByTagName("li");

    console.log("querySelectorAll", liList1);
    console.log("传统获取", liList2);

    // 小结
    // document.querySelectorAll()  根据传入的css选择器获取元素 -> 元素已经获取就定死了,不会随页面更新 => 获取元素比较方便,但是如果页面中元素有增加 删除 无法同步 -> 只能获取页面中一开始就在的元素

    // 传统的获取元素的方法  =>  对应class名 标签名 name属性获取元素 -> 会随着页面中 (同类名 同类型 同name属性)的元素增加或减少自动更新集合(跟页面保持统一) -> 虽然获取可能要麻烦一点 -> 但是如果页面中元素有增加 删除 集合会和页面保持一致
    // document.getElementsByClassName()
    // document.getElementsByTagName()
    // document.getElementsByName()
    // parent.getElementsByClassName()
    // parent.getElementsByTagName()

    add.onclick = function () {
        // 如何创建一个li
        var li = document.createElement("li"); // 创建一个元素节点(li)

        // 被创建的li -> 正常的元素节点 -> 修改内容 添加属性 修改样式 绑定事件
        li.innerText = "我是被新增的li";
        li.setAttribute("class", "newLi");

        var list = ["red", "orange", "yellow", "green", "pink", "#6ff"];
        var index = Math.floor(Math.random() * list.length);
        li.style.backgroundColor = list[index];

        li.onclick = function () {
            alert(11111);
        }
        ul.appendChild(li);   // 追加父元素

        console.log("querySelectorAll", liList1);
        console.log("传统获取", liList2);

    }

    del.onclick = function () {
        ul.removeChild(ul.lastElementChild); // 删除最后一个元素

        console.log("querySelectorAll", liList1);
        console.log("传统获取", liList2);
    }



</script>

</html>